<template>
  <nuxt-link
    :key="article.id"
    :to="{ name: 'articles-id', params: { id: article.id } }"
    class="uk-link-reset"
  >
    <div class="uk-card uk-card-muted">
      <!--      <div class="uk-card-media-top">-->
      <!--        &lt;!&ndash; <img :src="getStrapiMedia(article.image.url)" height="100" /> &ndash;&gt;-->
      <!--      </div>-->
      <!--      <div class="uk-card-body">-->
      <div>
        <!--        <p v-if="article.category" id="category" class="uk-text-uppercase">-->
        <!--          {{ article.category.name }}-->
        <!--        </p>-->
        <img
          class="avatar"
          :src="getStrapiMedia(article.image.url)"
          style="position: static; object-fit: cover; border-radius: 10px"
          :alt="article.title"
        />
        <p id="title">{{ article.title }}</p>
        <!--        <hr class="uk-divider-small" />-->
        <!--        <div class="uk-grid-small uk-flex-left" data-uk-grid="true">-->
        <!--          &lt;!&ndash;          <div>&ndash;&gt;-->
        <!--          &lt;!&ndash;            <img&ndash;&gt;-->
        <!--          &lt;!&ndash;              class="avatar"&ndash;&gt;-->
        <!--          &lt;!&ndash;              :src="getStrapiMedia(article.image.url)"&ndash;&gt;-->
        <!--          &lt;!&ndash;              style="position: static; border-radius: 50%; object-fit: cover"&ndash;&gt;-->
        <!--          &lt;!&ndash;              width="40px"&ndash;&gt;-->
        <!--          &lt;!&ndash;              height="40px"&ndash;&gt;-->
        <!--          &lt;!&ndash;              :alt="article.title"&ndash;&gt;-->
        <!--          &lt;!&ndash;            />&ndash;&gt;-->
        <!--          &lt;!&ndash;          </div>&ndash;&gt;-->
        <!--          &lt;!&ndash;          <div class="uk-width-expand">&ndash;&gt;-->
        <!--          &lt;!&ndash;            <p class="uk-margin-remove-bottom">{{ article.author.name }}</p>&ndash;&gt;-->
        <!--          &lt;!&ndash;          </div>&ndash;&gt;-->
        <!--        </div>-->
      </div>
    </div>
  </nuxt-link>
</template>

<script>
import { getStrapiMedia } from "../utils/medias";

export default {
  props: {
    article: {
      type: Object,
      default: () => ({}),
    },
  },
  methods: {
    getStrapiMedia,
  },
};
</script>
